<template>
	<view class="notice_card_box" v-if="noticeData?.id">
		<view class="time_box">
			<view class="time">
				{{changeDate(noticeData.createAt)}}
			</view>
		</view>
		<view class="content_box">
			<view class="notice_card_left">
				<Avatar :fileName="noticeData.user.user_avatar" size="70rpx" />
			</view>
			<view class="content">
				<view class="name text_ellipsis">
					{{noticeData.user.nick_name_by_dormitory}}
				</view>
				<view @click="toNotice">
					<MyCard>
						<uni-badge class="uni-badge-left-margin" :offset="[10, 10]" :text="noticeData.viewed ? '' : '未读'" absolute="rightTop"
							size="small">
							<view class="notice_card_right">
								<view class="titile text_ellipsis">
									{{noticeData.title}}
								</view>
								<view class="info">
									{{noticeData.content}}
								</view>
							</view>
						</uni-badge>
					</MyCard>					
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import MyCard from '@/components/MyCard/MyCard.vue'
	import Avatar from '@/components/Avatar/Avatar.vue'
	
	import {
		changeDate
	} from '@/utils/changeData.js'

	const props = defineProps({
		noticeData: {
			type: Object
		}
	})
	
	const toNotice=()=>{
		uni.navigateTo({
			url:`/pages/Dormitory/Notice/NoticeInfo/NoticeInfo?notice_id=${props.noticeData.id}`
		})
	}
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.notice_card_box {
		width: calc(100vw);
		padding: 0 20rpx;

		.time_box {
			display: flex;
			justify-content: center;

			.time {
				font-size: 22rpx;
				padding: 10rpx 20rpx;
				background-color: #FDFEFF;
				border-radius: 5rpx;
				color: #818284;
				margin-top: 20rpx;
				margin-bottom: -2rpx;
			}
		}

		.content_box {
			display: flex;
			width: calc(10vw);

			.notice_card_left {}

			.content {
				width: calc(85vw);

				.name {
					margin-left: 20rpx;
					font-size: 25rpx;
					color: #818284;
					margin-bottom: -10rpx;
					margin-top: 10rpx;
					letter-spacing: 2rpx;
				}

				.notice_card_right {
					width: calc(75vw);

					.titile {
						letter-spacing: 2rpx;
						margin: 10rpx 0;
						width: 90%;
					}

					.info {
						font-size: 26rpx;
						color: #818284;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>
